<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/citys.css">
    <title>Document</title>
</head>

<body>
    <div class="main-top">
        <div class="cont">
            <span class="logo">
                <a href="./首页.html"></a>
            </span>
        </div>
    </div>
    <div class="wrapper cont">
        <ul class="city_nav_group">
            <li class="city_nav city_nav_selected">
                <a>国内城市</a>
            </li>
        </ul>
        <div class="city_search">
            <div class="search_wrapper">
                <input type="text" placeholder="搜索城市" class="sug-input">
                <a class="btn btn_blue search_btn">搜索</a>
                <i class="icon icon_search"></i>
                <div id="city_sug"></div>
            </div>
        </div>
        <div class="download">
            <div class="title">下载贝壳APP</div>
            <img width="110" height="110"
                src="https://ajax.api.ke.com/qr/getDownloadQr?location=right&ljweb_channel_key=ershoufang_search"
                alt="下载贝壳找房APP">
        </div>
    </div>
    <div class="city_selection_section cont">
        <div class="city-item">
            <div class="city_recommend c_b">
                <div class="city_recommend_tit">热门城市</div>
                <ul class="city_recommend_list"></ul>
            </div>
            <div class="city_recommend c_b">
                <div class="city_recommend_tit">城市选择</div>
                <div class="select">
                    <div class="chang-city"><span>省份</span><i class="icon"></i></div>
                    <div class="select_options_frame" id="provincesItem">
                        <ul class="select_options"></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="chang-city"><span>城市</span><i class="icon"></i></div>
                    <div class="select_options_frame" id="cityItem">
                        <ul class="select_options"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="city_recommend">
            <div class="city-item ">
                <div class="city_recommend_tit city_recommend_tit_long c_b">
                    按照省份首字母选择
                </div>
                <div class="city_list_section">
                    <ul class="city_list_ul">

                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../js/jquery-3.6.0.js"></script>
<script src="../js/Convert_Pinyin.js"></script>
<script>
    $.ajax({
        type: "get",
        url: "http://120.48.109.174:8081/area/hot",
        async: true,
        success: function (res) {
            $(res.body).each(function (i, item) {
                $('.city_recommend_list').append($(`<li></li>`).addClass('clickdata').attr('data-value', item.value).attr('data-name', item.pinyin).append($(`<a href='./首页.html'>${item.label}</a>`)))
            })
        }
    })
    
    
    
    
    $.ajax({
        type: "get",
        url: "../json/省份.json",
        async: true,
        success: function (res) {
            $.each(res, function (key, value) {
                $('#provincesItem .select_options').append($(`<li>${key}</li>`))
            })
            $('.select_options_frame').on('click', 'li', function () {
                $(this).parent().parent().hide().siblings().eq(0).children().eq(0).html($(this).html())
            })
            $('.chang-city').eq(1).click(function () {
                $('#cityItem .select_options').empty()
                $.each(res, function (key, value) {
                    if ($('.chang-city').eq(0).children().eq(0).html() == key) {
                        $.each(value, function (i, item) {
                            $('#cityItem .select_options').append($(`<li><a href='./首页1.html'>${item}</a></li>`).addClass('clickdata'))
                        })
                    }
                })
            })
        }
    })




    var arr = [];
    $.ajax({
        type: "get",
        url: "../json/省份.json",
        async: true,
        success: function (res) {
            $.each(res, function (key, value) {
                arr.push(pinyin.getCamelChars(key).charAt(0))
                arr = reset(arr)
            })
            $.each(arr, function (i, item) {
                $('.city_list_ul').append($(`<li></li>`).addClass('city_list_li city_list_li_selected')
                    .append($('<div></div>').addClass('city_firstletter').html(`<span>${item}</span><i></i>`))
                    .append($('<div></div>').addClass('city_list')))
            })
            
            $.each(res, function (key, value) {
                $.each($('.city_list_li_selected span'),function(i,item){
                    if(pinyin.getCamelChars(key).charAt(0) == $(item).html()){
                        $('.city_list').eq(i).append($('<div></div>').addClass('city_province cf')
                        .append($(`<div>${key}</div>`).addClass('city_list_tit c_b'))
                        .append($('<ul></ul>')))
                    }
                })
            })
            $.each($('.city_province ul'), function (i, item) {
                $.each(res, function (k, val) {
                    if ($(item).prev().html() == k) {
                        $.each(val, function (index, item) {
                            $('.city_province ul').eq(i).append($(`<li></li>`).addClass('clickdata').append(`<a href='./首页.html'>${item}</a>`))
                        })
                    }
                })
            })
            $('.select_options_frame').on('click', 'li', function () {
                $(this).parent().parent().hide().siblings().eq(0).children().eq(0).html($(this).html())
            })
            $('.chang-city').eq(1).click(function () {
                $('#cityItem .select_options').empty()
                $.each(res, function (key, value) {
                    if ($('.chang-city').eq(0).children().eq(0).html() == key) {
                        $.each(value, function (i, item) {
                            $('#cityItem .select_options').append($(`<li><a href='./首页.html'>${item}</a></li>`).addClass('clickdata'))
                        })
                    }
                })
            })
            $('.search_btn').click(function () {
                $.each(res, function (key, value) {
                    $.each(value, function (i, item) {
                        if ($('.sug-input').val() == item) {
                            localStorage.setItem('city', item)
                            window.location.href = './首页.html'
                        }
                    })
                })
            })
        }
    })

    $('.city_list_section').on('mouseover','.city_province',function(){
        $('.city_firstletter_select').removeClass('city_firstletter_select')
        $(this).parent().prev().addClass('city_firstletter_select').children().eq(1).css({'top':`${($(this).height()+28)/2+($(this).height()+28)*($(this).index())}px`})
        console.log( $(this).index())
    })

    $('.chang-city').click(function () {
        $('.select_options_frame').eq($('.chang-city').index(this)).show()
    })

    $('html').on('click', '.clickdata', function () {
        localStorage.setItem('city', $(this).children().eq(0).html())
        window.location.href = './首页.html'
    })

    // 去重排序
    function reset(arr) {
        var new_arr = [];
        $.each(arr, function (i, item) {
            if ($.inArray(item, new_arr) == -1) {
                new_arr.push(item)
            }
        })
        new_arr.sort()
        return new_arr
    }
</script>

</html>